<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet"  href="css/look.css">
</head>
<body>
	<header class="header">
		<div class="bg"></div>
		<div class="links">
			<a href="#">了解更多</a>
			<a href="#">反馈意见</a>
		</div>
	</header>
	<section class="content">
     <header class="content-tit">
	 <h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
	</header>
	
	<div class="mainBody-wp">
		<div class="mainBody">
			
		
		  <div class="regTabs">
		  	 <ul class="tabs1-on">
		  	 	<li><a href="#" class="a1">注册字母邮箱</a></li>
		  	 	<li><a href="#" >注册手机号码邮箱</a></li>
		  	 	<li><a href="#">注册VIP邮箱</a></li>
		  	 	</ul>
		  </div>
		
        
    
          <div class="regForm" style="display: block;">
          	<dl class="regForm-item mainBody-hasFocus-focusArea">
          		<dt class="regForm-item-tit">
          			<span class="txt-impt">*</span>
          			邮箱地址
          		</dt>
          <dd class="regForm-item-ct">
          <input type="type" name="name" class="ipt">
          <strong class="txt-14">@</strong> 	
          <select>
          	<option>163.com</option>
          </select>
          <div class="tips">
          	<span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
          </div>

          </dd>




          </dl>
          <dl class="regForm-item">
          	<dt class="regForm-item-tit">
          		<span class="txt-impt">*</span>
          		密码
          	</dt>
          	<dd class="regForm-item-ct">
          		<input type="type" name="name" class="ipt norWidthIpt">
          		<div class="tips">
          			<span class="txt-tips">6~16个字符，区分大小写</span>

          		</div>
          		
          	</dd>
          </dl>	
          <dl class="regForm-item">
          	<dt class="regForm-item-tit">
          		<span class="txt-impt">*</span>
          		确定密码
            </dt>
            <dd class="regForm-item-ct">
            	<input type="type" name="name" class="ipt norWidthIpt">
            	 <div class="tips">
            	 	<span class="txt-tips">请再次填写密码</span>
            	 	
            	 </div>
            	
            </dd>

          </dl>
      <div class="regFxt">
                    <dl class="regFxt-itm">
                        <dt class="regFxt-it">
                          <span class="txt-imp">*</span>手机号码
                        </dt>
                        <dd class="regFxt-i">
                            <input type="text" class="input ipt" style="padding-left: 35px;width:292px;  color:#000;" value="+86-" id="phoos">                                                               
                            <div class="itlSelect" id="regTabs">
                            <a href="#" class="flag-CN"><em></em>中国 +86</a>    
                            <a href="#" class="flag-AL"><em></em>阿尔巴尼亚(Shqipëria) +355</a>
                            <a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
                            <a href="#" class="flag-AF"><em></em>阿富汗(Republic of Afghanistan) +93</a>
                            <a href="#" class="flag-AR" data-code="+54"><em>&nbsp;</em>阿根廷(Argentina) +54</a>
                            <a href="#" class="flag-AE" data-code="+971"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
                  
                            </div>
                           <div class="itl" id="wwwq" style="width:35px;height:27px;line-height:27px;">
                                <div class="itl-fl" >
                                    <em></em>
                                </div>
                           </div>
                            <div class="tip">
                                <span>忘记密码时，可以通过该手机号码快速找回密码</span>
                            </div>
                        </dd>
                    </dl>
                </div> 
              </div>
           <div class="regForm" style="display: none;">
            <dl class="regForm-item mainBody-hasFocus-focusArea">
              <dt class="regForm-item-tit">
                <span class="txt-impt">*</span>
               手机号码
              </dt>
          <dd class="regForm-item-ct">
          <input type="type" name="name" class="ipt">
          <strong class="txt-14">@163.com</strong>   
          
          <div class="tips">
            <span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
          </div>

          </dd>
          </dl>
        </div>
       </div>
            <div>
               <aside class="mainBody-side">
                 <div class="regExt">
                   <img src="img/reg_master.gif">
                 </div>
               </aside>
            </div>



    </section>
      <script type="text/javascript">

        function itlSelect() {
           var links=document.querySelectorAll('.itlSelect');
            // console.log('.itlSelect');
            for (var i = 0; i < links.length; i++) {
                links[i].addEventListener('click',function(e){
                    var a=e.target;
                    var txt=a.innerText;
                    var cls=a.className;
                    console.log(txt+"--"+cls);
                    // 获取“+”所在的位置
                    // txt.length-txt.indexOf('+');

                    var aiuy=txt.substr(txt.indexOf('+'),txt.length-txt.indexOf('+')) ;
                    document.querySelector('#phoos').setAttribute('value',aiuy);
                    var q=document.querySelector('.itl-fl');
                    q.className=" itl-fl "+cls;          
                  

                })                
            }
        }
    function hgdsh(){
            var wewe=document.querySelector('.itl');
            // console.log(wewe);
            wewe.addEventListener('click',function(e){
                    var w=e.target;
            var qrwe=document.querySelector('#regTabs');
            // console.log(links);
            // qrwe.style.display==="none"? qrwe.style.display="block":qrwe.style.display="none";
             
            if(qrwe.style.display==="none"){
                qrwe.style.display="block";
            }else{
                qrwe.style.display="none";
            }
          
            })

        }
        function ghajds(){
           var RegTxt=document.querySelectorAll('.regTabs ul li a');
           var Ul=document.querySelector('.regTabs ul');     for (var t = 0; t < jhfdjk.length; t++) {
                  jhfdjk[t].index=t;
                }
           // console.log(RegTxt);
           for (var i = 0; i < RegTxt.length; i++) {
                RegTxt[i].index=i;
               RegTxt[i].addEventListener('click',function(e){
                 var item=e.target;
              
                 // console.log(item.index);
                Ul.style.background='url(img/tab.jpg) 0-'+item.index*55.5+'px';
                for (var j = 0; j < RegTxt.length; j++) {
                  RegTxt[j].style.color="#000";
                }
                item.style.color="#fff";
                // Ul.style.backgroundColor="#fff";
              
                for (var e = 0; e < jhfdjk.length; e++) {
                  jhfdjk[e].style.display="block";
                  console.log(jhfdjk[e]);
                }
              // jhfdjk[this.index].style.display="none";
             jhfdjk[this.index].style.display="none";
            
              console.log(jhfdjk[this.index]);
               })
           }
        }
        var jhfdjk=document.querySelector('.regForm');
        console.log(jhfdjk);
        ghajds();
        hgdsh();
   
        itlSelect();      
        
    </script>
    



</body>
</html>